<template>
  <div>
    <el-card style="margin-bottom: 20px" shadow="never">
      <el-form>
        <el-row type="flex">
          <el-col :span="8"
            ><el-form-item label="车辆类型：" label-width="100px"
              ><el-input></el-input></el-form-item
          ></el-col>
          <el-col :span="8"
            ><el-form-item label="车辆号码：" label-width="100px"
              ><el-input></el-input></el-form-item
          ></el-col>
          <el-col :span="8"
            ><el-form-item style="margin-left: 30px">
              <el-button type="primary">搜索</el-button>
              <el-button>重置</el-button>
            </el-form-item></el-col
          >
        </el-row>
      </el-form>
    </el-card>
    <el-menu
      default-active="1"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#ffffff"
      text-color="#333333"
      active-text-color="#e15536"
      style="margin-bottom: 20px"
    >
      <el-menu-item index="1" @click="getAll('all')"
        >全部{{ total }}</el-menu-item
      >
      <el-menu-item index="2" @click="getAvailable('available')"
        >可用{{ total2 }}</el-menu-item
      >
      <el-menu-item index="3" @click="getDisable('disable')"
        >停用{{ total3 }}</el-menu-item
      >
    </el-menu>
    <el-card shadow="never">
      <el-button type="primary" style="margin-bottom: 10px">新增车辆</el-button>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="licensePlate" label="车牌号码">
        </el-table-column>
        <el-table-column prop="truckTypeName" label="车辆类型">
        </el-table-column>
        <el-table-column prop="driverNum" label="司机数量"> </el-table-column>
        <el-table-column prop="status" label="车辆状态">
          <template #default="{ row }">
            <div
              v-if="row.workStatus === 1"
              style="
                display: inline-block;
                background-color: #1dc779;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                margin-right: 5px;
              "
            ></div>
            <div
              v-else
              style="
                display: inline-block;
                background-color: #e15536;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                margin-right: 5px;
              "
            ></div>
            {{ row.workStatus === 1 ? "可用" : "停用" }}
          </template>
        </el-table-column>
        <el-table-column prop="deviceGpsId" label="GPS设备ID">
        </el-table-column>
        <el-table-column prop="allowableLoad" label="实载重量(T)">
        </el-table-column>
        <el-table-column prop="allowableVolume" label="实载体积(方)">
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作"
          width="200px"
          align="center"
        >
          <template #default="{ row }">
            <el-button type="text" style="color: #419eff">查看详情</el-button>
            <el-divider direction="vertical"></el-divider>
            <!-- :class="{row.workStatus===1? 'color': 'disableColor'}"-->
            <!--            <el-button-->
            <!--              v-if="row.workStatus === 1"-->
            <!--              type="text"-->
            <!--              style="color: #f56c6c"-->
            <!--            >-->
            <!--              停用-->
            <!--            </el-button>-->
            <!--            <el-button v-else type="text" style="color: #419eff">-->
            <!--              启用-->
            <!--            </el-button>-->
            <el-button
              type="text"
              :style="{ color: row.workStatus === 1 ? '#f56c6c' : ' #419eff' }"
            >
              <!--            <el-button type="text" style="color: #419eff">-->
              {{ row.workStatus === 1 ? "停用" : "启用" }}
            </el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" style="color: #419eff">配置司机</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" style="margin-top: 15px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="list.page"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="list.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
        >
        </el-pagination>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getCarsListApi } from "@/api/car-models";

export default {
  name: "VehiclePage",
  data() {
    return {
      activeName: "",
      tableData: [],
      // page: 1,
      // pageSize: 10,
      // total: 0,
      // workStatus: 1,
      total: 0,
      total2: 0,
      total3: 0,
      pageTotal: 0,
      list: {
        page: 1,
        pageSize: 10,
        workStatus: null,
      },
    };
  },
  created() {
    this.getCarCurrentList();
    this.getAvailableList();
    this.getDisableList();
    this.list.workStatus = null;
  },
  methods: {
    // 获取停用列表
    async getDisable() {
      this.list.workStatus = 0;
      this.list.page = 1;
      const res = await getCarsListApi(this.list);
      this.tableData = res.data.items;
      this.pageTotal = +res.data.counts;
      // this.list.workStatus = null;
    },
    // 获取可用列表
    async getAvailable() {
      this.list.workStatus = 1;
      this.list.page = 1;
      const res = await getCarsListApi(this.list);
      this.tableData = res.data.items;
      this.pageTotal = +res.data.counts;
      // this.list.workStatus = null;
    },
    getAll() {
      this.list.page = 1;
      this.getCarCurrentList();
    },
    async getCarCurrentList() {
      this.list.workStatus = null;
      const res = await getCarsListApi(this.list);
      console.log(res);
      this.total = +res.data.counts;
      this.tableData = res.data.items;
      this.pageTotal = +res.data.counts;
      // this.list.workStatus = 1;
      // const res2 = await getCarsListApi(this.list);
      // this.total2 = +res2.data.counts;
      // this.list.workStatus = 0;
      // const res3 = await getCarsListApi(this.list);
      // this.total3 = +res3.data.counts;
      // this.list.workStatus = null;
    },
    async getAvailableList() {
      this.list.workStatus = 1;

      const res2 = await getCarsListApi(this.list);
      this.total2 = +res2.data.counts;
    },
    async getDisableList() {
      this.list.workStatus = 0;

      const res3 = await getCarsListApi(this.list);
      this.total3 = +res3.data.counts;
    },
    handleSizeChange(value) {
      this.list.pageSize = value;
      this.getCarCurrentList();
    },
    handleCurrentChange(value) {
      this.list.page = value;
      // this.getCarCurrentList();
      if (this.list.workStatus === null) {
        this.getCarCurrentList();
      } else if (this.list.workStatus === 1) {
        this.getAvailable();
      } else if (this.list.workStatus === 0) {
        this.getDisable();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-menu.el-menu--horizontal {
  border-bottom: unset;
}
.el-menu-item is-active {
  border-bottom-color: #fff;
}
.el-card {
  border: unset;
}
::v-deep .el-menu-item.is-active {
  border-bottom: unset !important;
  color: #303133;
}
.disableColor {
  color: #f56c6c;
}
.color {
  color: #419eff;
}

::v-deep .hover {
  background-color: #ffeeeb;
}
</style>
